<template>
    <div class="sub-bread">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding:25px 10px; ">
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="category.top" :to="`/category/${category.top.id}`">{{category.top.name}}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="category.sub">{{category.sub.name}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
    export default {
        name: "SubBread",
        created() {
        },
        computed: {
            category() {
                const obj = {}
                this.$store.getters.categoryList.forEach(item => {
                    item.children?.forEach(sub => {
                        if (sub.id === this.$route.params.id) {
                            // 设置二级类目
                            obj.sub = {id: sub.id, name: sub.name}
                            // 设置一级类目
                            obj.top = {id: item.id, name: item.name}
                        }
                    })

                })
                return obj
            }
        }
    }
</script>

<style scoped>

</style>